<template>
	<view>
		<view class="flex head-title-nav px-3">
			<view :class="navType == 0? 'active':''" @click="tabType(0)">未结算</view>
			<view :class="navType == 0? '':'active'" @click="tabType(1)">已结算</view>
		</view>

		<view class="px-2 py-2">
			<view class="item-content px-2 pt-3 pb-2 mb-3" v-for="(item,index) in list" :key="index"
				v-if="list.length != 0" @click="eaitRecharge(item)">
				<view class="flex">
					<view class="left-img mr-3">
						<image mode="aspectFit" :src="item.image"></image>
					</view>
					<view class="label-box">
						<view class="flex align-center flex-nowrap">
							<view class="label-title">上传日期:</view>
							<view class="flex font-sm flex-nowrap">{{item.createtime}}</view>
						</view>
						<view class="flex align-center">
							<view class="label-title">银行卡:</view>
							<view class="font-sm">{{item.card_num}}</view>
						</view>
						<view class="flex align-center justify-between">
							<view>
								<view class="flex align-center">
									<view class="label-title">用电度数:</view>
									<view class="font-sm">{{item.use_num}}</view>
								</view>
							</view>
							<view><text class="font-sm">{{number_car || 0}}</text>元/度</view>
						</view>
						<view class="flex align-center justify-between">
							<view>
								<view class="flex align-center">
									<view class="label-title">电费:</view>
									<view class="font-sm">{{item.money}}</view>
								</view>
							</view>
							<view>{{navType==0?'未结算':'已结算'}}</view>
						</view>
					</view>
				</view>
				<view class="font my-1 text-danger" v-if="navType == 0 && item.status == 2">
					审核未通过：{{item.cause}}
				</view>

			</view>

			<view class="mt-5 font-lg" v-if="list.length == 0" style="text-align: center;">暂无数据</view>
		</view>

		<view class="edit-btn" @click="navTo">抄送电表</view>

		<u-picker :show="show" :closeOnClickOverlay="closeOnClickOverlay" keyName="device_name" 
		title="请选择您的设备" :columns="deviceList" @confirm="changeHandler" @cancel="close" ></u-picker>
	</view>
</template>

<script>
	import {
		postDegrees,
		postDegreesLists,
		postCardList,
		getde
	} from "../../api/user.js";
	export default {
		data() {
			return {
				closeOnClickOverlay:true,
				navType: 0, // 0已提交  1已结 算
				page: 1,
				limit: 10,
				count: 0,
				list: [],
				number_car: 0,
				deviceList: [],
				show: false
			}
		},
		onShow() {
			this.list.length = 0;
			this.page = 1
			this.getytj();
			this.number_car = uni.getStorageSync('userInfo').degree_money;
		},
		methods: {
			close(){
				console.log("close")
				this.show=false
			},
			changeHandler(e) {
				console.log('confirm', e) 
				this.show = false 
				uni.navigateTo({
					url: "/pages/home/landlord?strv="+e.value[0].strv+"&price="+e.value[0].eleprice+"&device_id="+e.value[0].id
				})
			},
			async navTo() {
				var data = {}
				data.token = uni.getStorageSync('token');
				var res = await postCardList(data);
				if (res.data.code == 1) {

					if (res.data.data.length > 0) {
						var result = await getde(data);
						console.log("getde", result);
						if (result.data.code == 1) {
							this.deviceList=[];
							this.deviceList.push(result.data.data)
							console.log("getde", this.deviceList);
							this.show = true
						}
						// uni.navigateTo({
						// 	url: "/pages/user/house-owner"
						// })
					} else {
						uni.showToast({
							title: "当前未添加银行卡，请先添加银行卡",
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/user/add-bank",
							})
						}, 1000)
					}
				}

			},

			tabType(index) {
				if (this.navType != index) {
					this.navType = index;
					this.list.length = 0;
					this.count = 0
					this.getytj()
				}
			},

			async getytj() {
				var data = {
					page: this.page,
					limit: this.limit,
				}
				data.token = uni.getStorageSync('token');
				var res = this.navType == 0 ? await postDegrees(data) : await postDegreesLists(data);
				if (res.data.code == 1) {
					this.count = res.data.data.count;
					var list = res.data.data.list;
					list.forEach(item => {
						this.list.push(item)
					})
				}
			},

			eaitRecharge(item) {
				if (this.navType == 1) return
				uni.navigateTo({
					url: "/pages/user/house-owner?detail=" + JSON.stringify(item)
				})
			}

		},

		onReachBottom() {
			if (this.list.length < this.count) {
				++this.page
				this.getytj()
			} else {
				return false
			}
		},
		
	}
</script>

<style scoped>
	page {
		background: rgb(245, 245, 245);
	}

	.head-title-nav {
		width: 100%;
		box-sizing: border-box;
	}

	.head-title-nav>view {
		width: 50%;
		padding: 30rpx 0;
		text-align: center;
		font-size: 30rpx;
		box-sizing: border-box;
	}

	.head-title-nav>.active {
		color: #49c265;
	}

	.item-content {
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.label-box {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #333333;
	}

	.label-title {
		width: 130rpx;
		text-align-last: justify;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.left-img {
		width: 260rpx;
		height: 200rpx;
	}

	.left-img image {
		width: 100%;
		height: 100%;
	}

	.edit-btn {
		width: 350rpx;
		height: 80rpx;
		background-color: #49c265;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 40rpx;
		position: fixed;
		left: 50%;
		transform: translate(-50%);
		bottom: 100rpx;
	}
</style>
